<template>
	<div class="home">
		<div>
			<div class="top">

				<div class="logo">
					<div class="img">
						<a>
							<img :src="`http://127.0.0.1/api/public/showimg/${1}`" />
						</a>
					</div>
				</div>

				<div class="ssk">
					<div style="70%">
						<div>
							<input type="text" autocomplete="off" placeholder="请输入内容" class="el-input__inner" v-model="keywords"/>
						</div>
					</div>

					<div style="55%">
						<button @click="btn()">
							<i class="el-icon-search"></i>
						</button>
					</div>
				</div>

				<div class="gwc">
					<router-link to="/pc/gwc">
						<button>
							&nbsp;&nbsp;&nbsp;
							<i class="el-icon-shopping-cart-full"></i>
							&nbsp;我的购物车&nbsp;&nbsp;&nbsp;
						</button>
					</router-link>
				</div>
			</div>

			<div style="height: 2px;margin-bottom: 5px;"></div>

			<div class="fl">
				<div class="bt">
					<div style="width: 100%;line-height: 36px;">
						<button>全部商品分类详情</button>
					</div>
				</div>

				<div style="width: 50%;"></div>

				<div class="hot">
					<div>
						<button>&nbsp;&nbsp;&nbsp;&nbsp;热卖中&nbsp;&nbsp;&nbsp;&nbsp;</button>
					</div>
				</div>
			</div>

			<div class="body">
				<div class="div">
					<a v-for="item in types">{{item.name}}</a>
				</div>

				<div style="width: 50%;">
					<div class="banner">
						<el-carousel :interval="5000" arrow="nerver" height="100%;">
							<el-carousel-item v-for="(item,i) in bannerlist" :key="item.id" v-if="i < 6">
								<img :src="`http://127.0.0.1/api/public/showimg/${item.picture}`" />
							</el-carousel-item>
						</el-carousel>
					</div>
				</div>

				<div class="hotbook">
					<div>
						<div class="xq" v-for="item in hotBooks">
							<div class="fan">
								<div class="yuan">
									<div class="img">
										<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" />
									</div>
								</div>
							</div>

							<div class="wz">
								<div class="xx">
									<p class="name">{{item.name}}</p>
									<p class="price">¥{{item.price}}</p>
								</div>

								<div class="xx">
									<p class="maker">{{item.maker}}</p>
									<p class="maker">{{item.author}}</p>
									<p>
										<a href="#">
											买
										</a>
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div style="height: 22px;"></div>

			<div class="newbook">
				<div class="tm">
					<div class="dt">
						<a href="#">最新上架书籍</a>
					</div>
				</div>
			</div>

			<div style="height: 2px;background-color: rgb(255, 78, 0);margin-bottom: 2px;"></div>

			<div style="display: flex;">
				<div style="width: 2%;"></div>
				<div class="bj">
					<div style="width: 20%;" v-for="item in newBooks">
						<div class="topsale">
							<router-link :to="`/pc/bookdetail/${item.id}`">
								<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" />
							</router-link>
							<div style="line-height: 20px;width: 100%;">
								<div class="name">
									<p>{{item.name}}</p>
								</div>
								<p align="center">
									￥{{item.price}}&nbsp;
									<button class="el-button el-button--default el-button--mini">
										<span>
											<i class="el-icon-shopping-cart-full"></i>
											买
										</span>
									</button>
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="foot">
				<ul>
					<li>
						<a>
							<img src="../../assets/img/mobile/下载.png" width="62" height="62" />
						</a>
						<div>
							<h2>正品保障</h2>
							正品行货 放心购买
						</div>
					</li>
					<li>
						<a>
							<img src="../../assets/img/mobile/下载 (1).png" width="62" height="62" />
						</a>
						<div>
							<h2>满38包邮</h2>
							满38包邮 免运费
						</div>
					</li>
					<li>
						<a>
							<img src="../../assets/img/mobile/下载 (2).png" width="62" height="62" />
						</a>
						<div>
							<h2>天天低价</h2>
							天天低价 畅选无忧
						</div>
					</li>
					<li>
						<a>
							<img src="../../assets/img/mobile/下载 (3).png" width="62" height="62" />
						</a>
						<div>
							<h2>准时送达</h2>
							收货时间由你做主
						</div>
					</li>
				</ul>
			</div>

			<div style="height: 20px;"></div>

		</div>
	</div>
</template>

<script>
	export default {
		name: 'Home',
		data() {
			return {
				types: [],
				bannerlist: [],
				hotBooks: [],
				newBooks: [],
				keywords:'',
			}
		},
		methods:{
			btn(){
				let fd = new FormData(); 
				fd.append('key',this.keywords);
				console.log(fd);
				this.$postk('/api/public/book/findPageKey/1/6',fd).then((resp)=>{
					console.log(resp.data);
					this.books = resp.data.data.books;
				})
				this.keywords = '';
			}
		},
		mounted() {
			let token = localStorage.getItem('token');
			token = "Bearer " + token;
			let h = {
				headers: {
					'Authorization': token,
				}
			}

			this.$get('/api/public/type/findAll2').then((rep) => {
				this.types = rep.data.data;
			})
			this.$get('/api/public/book/findTopSale/5').then((rep) => {
				this.hotBooks = rep.data.data;
			})
			this.$get('/api/public/findPageBook/1/10/0').then((rep) => {
				this.newBooks = rep.data.data.books;
			})
		},
		created() {
			this.$get('/api/public/findHot/1/6').then((resp) => {
				this.bannerlist = resp.data.data;
				this.img = this.$store.state.img;
				this.name = this.$store.state.name;
			});
		},
	}
</script>

<style scoped>
	.home {
		margin-top: 40px;
		margin-right: 8%;
		margin-left: 8%;
		min-height: 88vh;
		width: 100%;
	}

	.top {
		display: flex;
		height: 100px;
		line-height: 100px;
	}

	.logo {
		width: 25%;
		margin-top: 10px;
	}

	.img a img {
		height: 80px;
		width: 11vw;
	}

	.ssk {
		margin-left: 205px;
		width: 50%;
		display: flex;
		height: 30px;
		border: rgb(0, 0, 128);
	}

	.ssk input {
		width: 270px;
	}

	.ssk button {
		border: none;
		border-radius: 5%;
		margin-left: 1px;
		height: 40px;
		width: 50px;
		background-color: rgb(255, 78, 0);
		color: white;
	}

	.gwc {
		width: 25%;
		height: 100px;
		line-height: 36px;
		margin-left: 140px;
	}

	.gwc button {
		background-color: rgb(255, 78, 0);
		color: white;
		border: none;
		height: 40px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		margin-top: 30px;
	}

	.fl {
		display: flex;
		height: 36px;
		width: 95%;
		line-height: 36px;
		border-bottom: 4px solid rgb(255, 78, 0);
	}

	.fl .bt {
		width: 25%;
		display: flex;
		justify-content: space-between;
	}

	.fl .bt button {
		background-color: rgb(255, 78, 0);
		color: white;
		border: none;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		height: 40px;
		width: 85%;
	}

	.hot {
		width: 25%;
		display: flex;
		justify-content: flex-end;
		line-height: 36px;
	}

	.hot button {
		background-color: rgb(255, 78, 0);
		color: white;
		border: none;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		height: 30px;
		width: 150px;
		margin-top: 10px;
	}

	.body {
		display: flex;
		width: 100%;
		height: 360px;
		overflow: hidden;
		border: 2px solid lightgray;
	}

	.body .div {
		width: 20%;
		min-width: 200px;
		margin-top: 1px;
		height: 100%;
		min-height: 70vh;
		overflow: hidden
	}

	.body .div a {
		color: #606266;
		line-height: 22px;
		text-decoration: none;
		font-size: 15px;
		display: block;
		background-color: #fff;
		text-align: left;
		margin-left: 20px
	}

	.body .div a:hover {
		color: #ff4e00;
		border: 1px solid #ff4e00
	}

	.body .banner {
		height: 100%;
	}

	.body .banner img {
		width: 100%;
		height: 100%;
	}

	/* 穿刺：css用于修改固定组件样式的操作 */
	.body .banner .el-carousel /deep/ .el-carousel__button {
		height: 5px !important;
	}

	.body .banner .el-carousel /deep/ .is-active .el-carousel__button {
		background-color: #007bfd !important;
	}

	.body .banner .el-carousel /deep/ .el-carousel__container {
		height: 360px;
	}

	.hotbook {
		width: 25%;
		height: 100%;
		overflow: hidden;
	}

	.hotbook .xq {
		width: 100%;
		height: 75px;
		display: flex;
		margin-bottom: 3px;
	}

	.hotbook .xq .fan {
		border-radius: 3px;
		width: 60px;
		height: 60px;
	}

	.hotbook .xq .fan .yuan {
		width: 50px;
		height: 50px;
		overflow: hidden;
		border: 1px solid lightgray;
		border-radius: 25px;
	}

	.hotbook .xq .fan .yuan .img {
		width: 300%;
		height: 300%;
		left: -100%;
		top: -10%;
	}

	.hotbook .xq .fan .yuan .img img {
		width: 40%;
	}

	.hotbook .xq .wz {
		margin-left: 3px;
		width: 70%;
	}

	.hotbook .xq .wz .xx {
		display: flex;
		justify-content: space-between;
	}

	.wz .xx .name {
		color: rgb(96, 98, 102);
		font-size: 14px;
		font-weight: 800;
		overflow: hidden;
	}

	.wz .xx .price {
		color: rgb(96, 98, 102);
		font-size: 13px;
		font-weight: 900;
		overflow: hidden;
	}

	.wz .xx .maker {
		color: rgb(96, 98, 102);
		font-size: 14px;
	}

	.wz .xx a {
		display: block;
		width: 20px;
		padding-left: 5px;
		background-color: rgb(255, 78, 0);
		color: white;
		border-radius: 6px;
		font-weight: 80;
	}

	.newbook {
		display: flex;
		height: 30px;
		line-height: 28px;
	}

	.newbook .tm {
		width: 25%;
		display: flex;
		background-color: rgb(255, 78, 0);
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.newbook .tm .dt {
		width: 100%;
		line-height: 30px;
	}

	.newbook .tm .dt a {
		color: #fffaf0;
		text-decoration: none;
		font-weight: 700;
		font-size: 20px;
		display: block;
		background-color: #ff4e00;
		text-align: center;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.bj {
		display: flex;
		justify-content: space-between;
		max-width: 98%;
		width: 98%;
		flex-wrap: wrap;
		margin-top: 2vh;
	}

	.bj .topsale {
		width: 100%;
		height: 19vw;
		margin-left: 2%;
		margin-right: 2%;
	}

	.bj .topsale a {
		display: block;
		width: 75%;
		height: 13vw;
		overflow: hidden;
	}

	.bj .topsale a img {
		display: block;
		width: 140%;
		height: 120%;
		margin-top: -10%;
		margin-left: -20%;
	}

	.bj .topsale .name {
		display: flex;
		justify-content: center;
		margin-left: -15%;
	}

	.bj .topsale .name p {
		white-space: nowrap;
		overflow: hidden;
		font-weight: 500;
		font-size: 15px;
	}

	.bj .topsale button {
		background-color: rgb(255, 78, 0);
		color: whitesmoke;
	}

	.foot {
		margin-top: 5px;
		border-top: 2px solid rgb(255, 78, 0);
	}

	.foot ul {
		display: flex;
		justify-content: space-around;
		height: 100px;
		margin-top: 15px;
		list-style-type: disc;
		margin-block-start: 1em;
		margin-block-end: 1em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		padding-inline-start: 40px;
		list-style: none;
	}

	.foot ul li {
		display: list-item;
		text-align: -webkit-match-parent;
	}
</style>